import type { VbenFormSchema } from '@vben/common-ui';
import type { VxeGridProps } from '@vben/plugins/vxe-table';

import { h } from 'vue';

import { Switch } from 'ant-design-vue';

export interface StaffItem {
  department: string;
  email: string;
  enabled: boolean;
  entryTime: string;
  id: string;
  name: string;
  phone: string;
  position: string;
  remark?: string;
}

export function useColumns(
  onActionClick: (params: any) => void,
  onStatusChange: (newStatus: boolean, row: StaffItem) => Promise<boolean>,
): VxeGridProps['columns'] {
  return [
    {
      type: 'checkbox',
      width: 50,
    },
    {
      field: 'name',
      title: '姓名',
      width: 120,
    },
    {
      field: 'email',
      title: '邮箱',
      width: 180,
    },
    {
      field: 'phone',
      title: '手机号',
      width: 140,
    },
    {
      field: 'department',
      title: '部门',
      width: 120,
    },
    {
      field: 'position',
      title: '职位',
      width: 120,
    },
    {
      field: 'entryTime',
      title: '入职时间',
      width: 120,
    },
    {
      field: 'enabled',
      title: '状态',
      width: 80,
      cellRender: ({ row }) => {
        return h(Switch, {
          checked: row.enabled,
          checkedChildren: '启用',
          size: 'small',
          unCheckedChildren: '禁用',
          onChange: async (checked: boolean) => {
            const result = await onStatusChange(checked, row);
            if (result) {
              row.enabled = checked;
            }
          },
        });
      },
    },
    {
      field: 'remark',
      title: '备注',
      width: 150,
    },
    {
      fixed: 'right',
      title: '操作',
      width: 120,
      cellRender: ({ row }) => {
        return [
          h(
            'a',
            {
              onClick: () => onActionClick({ code: 'edit', row }),
            },
            '编辑',
          ),
          h(
            'a',
            {
              class: 'ml-2 text-red-500',
              onClick: () => onActionClick({ code: 'delete', row }),
            },
            '删除',
          ),
        ];
      },
    },
  ];
}

export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      fieldName: 'name',
      label: '姓名',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入手机号',
      },
      fieldName: 'phone',
      label: '手机号',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入部门',
      },
      fieldName: 'department',
      label: '部门',
    },
    {
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [
          { label: '启用', value: true },
          { label: '禁用', value: false },
        ],
        placeholder: '请选择状态',
      },
      fieldName: 'enabled',
      label: '状态',
    },
    {
      component: 'RangePicker',
      componentProps: {
        placeholder: ['开始时间', '结束时间'],
      },
      fieldName: 'entryTime',
      label: '入职时间',
    },
  ];
}

export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入姓名',
      },
      fieldName: 'name',
      label: '姓名',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入邮箱',
      },
      fieldName: 'email',
      label: '邮箱',
      rules: 'required|email',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入手机号',
      },
      fieldName: 'phone',
      label: '手机号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入部门',
      },
      fieldName: 'department',
      label: '部门',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入职位',
      },
      fieldName: 'position',
      label: '职位',
      rules: 'required',
    },
    {
      component: 'DatePicker',
      componentProps: {
        placeholder: '请选择入职时间',
      },
      fieldName: 'entryTime',
      label: '入职时间',
      rules: 'required',
    },
    {
      component: 'Switch',
      componentProps: {
        checkedChildren: '启用',
        unCheckedChildren: '禁用',
      },
      fieldName: 'enabled',
      label: '状态',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入备注',
        rows: 3,
      },
      fieldName: 'remark',
      label: '备注',
    },
  ];
}